<template>
  <div class="releaseNotice">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="发布公告" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <el-form ref="notice" :model="notice" label-width="80px">
        <el-form-item label="公告标题">
          <el-input v-model="notice.noticeTitle" size="mini" > </el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 400px; overflow-y: hidden;"
                v-model="notice.noticeContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onChange="onChange"
                @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <div class="button">
          <el-button type="success" @click="sendNotice">发布</el-button>
        </div>
      </el-form>


    </el-card>
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {addNotice, uploadImage} from "@/api/allApi";


export default {
  components: {Editor, Toolbar},
  name: "ReleaseNotice",
  data() {
    return {
      admin:'',
      notice: {
        noticeTitle:'',
        noticeContent:''
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg,
          },
        }
      },
      mode: 'simple', // or 'default'
    }
  },
  created() {
    this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.toolbarConfig.excludeKeys = [
        'group-video'
      ]
    },
    onChange () {
    },
    //上传图片
    uploadImg(file, insertFn) {
      //调接口，上传图片
      uploadImage({file: file}).then(res => {
        if (res.data.errno === 0) {
          insertFn(res.data.data.url);
          this.$message.success("上传成功")
        }
        else {
          this.$message.error("上传失败")
        }
      })
    },
    sendNotice() {
      if ((this.notice.noticeTitle == null || this.notice.noticeTitle == '')) {
        this.$message.error("标题不能为空！")
        return
      }else {
        if (this.editor.getText() == null ||this.editor.getText()== '' ){
          console.log(this.editor.getText())
          this.$message.error("内容不能为空！")
          return
        }
      }
      this.notice.adminId = this.admin.adminId
      // 获取不带html标签的纯文本，存入数据库作为摘要
      this.notice.noticeDigest = this.editor.getText()
      addNotice(
        this.notice
      ).then(res=>{
        if (res.data.success){
          this.$message.success('发布成功')
          this.notice= {}
        }else{
          this.$message.error('发布失败，请重试')
        }
      })
    }
  },
  mounted() {

  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}


</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
  .releaseNotice {
    .button {
      display: flex;
        justify-content: flex-end;
      }
  }
</style>